<%--
  Created by IntelliJ IDEA.
  User: 25131
  Date: 2021/10/6
  Time: 9:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树懒商城首页</title>


    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/layui/css/layui.css">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/generalMerchandise.css">

    <script src="${pageContext.request.contextPath}/res/jquery/jquery-3.5.1.min.js" rel="stylesheet"></script>

    <script src="${pageContext.request.contextPath}/js/generalMerchandise.js"></script>

</head>

<body>



<!--最上面的导航-->
<jsp:include page="../common/header.jsp" flush="true"/>


<div class="mod_conatiner">

    <!--主体部分 -- 头部导航下面盒子：logo + 搜索 + 购物车 -->
    <jsp:include page="../common/search_cart.jsp" flush="true"/>


    <!--下面所有部分-->
    <div id="app" class="o2cms">
        <!--商品-->
        <div class="lc-page" style="min-height: 500px;padding: 0px;margin: 0px;">
            <div class="lc-floor lc-xfloor--id-1597905104697 lc-floor-lg" style="background-size: auto;">
                <div class="lc-floor_inner">
                    <div class="lc-row lc-row--lg" style="margin-bottom: 0px;margin-top: 0px;padding-top: 0px;padding-bottom: 0px;">

                        <div class="lc-col lc-col--cols-full">
                            <div>
                                <div>
                                    <div style="display: none;">顶部组件占位</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--上面商品分类信息-->
            <div class="lc-floor lc-xfloor--id-1597905420432 lc-floor--lg" style="background-size: auto;">
                <div class="lc-floor__inner">
                    <div class="lc-row lc-row--lg" style="margin-bottom: 0px;margin-top: 0px;padding-top: 0px;padding-bottom: 0px">

                        <!--左边部分-->
                        <div class="lc-col lc-col--cols6-1">
                            <div class="lc-row lc-row--md" style="margin-bottom: 0px;margin-top: 0px;padding-top: 0px;padding-bottom: 0px;">
                                <!--手机分类盒子-->
                                <div class="lc-col lc-col--cols-full">
                                    <div>
                                        <!--搜索盒子-->
                                        <div class="nav-channel-container">
                                            <div class="quark-5cb43f1780772100479b2052__nav-channel quark-row">
                                                <div class="quark-col quark-col--lg-cols6-1">
                                                    <div class="quark-5cb43f1780772100479b2052__nav-channel__header" style="background-color: rgb(255,255,255);padding-bottom: 5px">
                                                        <h3 class="quark-5cb43f1780772100479b2052__nav-channel__header-title" style="background-color: rgb(14,14,14);">手机分类</h3>
                                                        <ul class="quark-5cb43f1780772100479b2052__nav-channel__tabs">

                                                            <!--手机热门推荐-->
                                                            <li class="quark-5cb43f1780772100479b2052__nav-channel__tab-item quark-5cb43f1780772100479b2052__nav-channel__tab-item--gutter" style="border-style: dotted;border-color: rgb(228,229,234) transparent transparent;">
                                                                <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__tab-name" style="color: rgb(14,1,1);">
                                                                    <i class="quark-5cb43f1780772100479b2052__nav-channel__tab-icon" style="display: none;">
                                                                        <img src="${pageContext.request.contextPath}/images/32x32.png" class="quark-5cb43f1780772100479b2052__nav-channel__tab-icon-default">
                                                                        <img src="${pageContext.request.contextPath}/wqlimages/32x32%20(1).png" lazyload="on" class="quark-5cb43f1780772100479b2052__nav-channel__tab-icon-hover">
                                                                    </i>
                                                                </a>
                                                                <h3>热门推荐</h3>

                                                                <!--下面手机品牌-->
                                                                <nav class="quark-5cb43f1780772100479b2052__nav-channel__sub-tabs" style="height: 4em;">
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">华为</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">小米</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">荣耀</span>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">苹果</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">OPPO</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">vivo</span>
                                                                    </a>
                                                                </nav>

                                                                <!--右边-->
                                                                <i class="quark-5cb43f1780772100479b2052__nav-channel__tab-dash"></i>
                                                            </li>

                                                            <!--机身内存-->
                                                            <li class="quark-5cb43f1780772100479b2052__nav-channel__tab-item quark-5cb43f1780772100479b2052__nav-channel__tab-item--gutter" style="border-style: dotted; border-color: rgb(228, 229, 234) transparent transparent;">
                                                                <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__tab-name" style="color: rgb(14, 1, 1);">
                                                                    <i class="quark-5cb43f1780772100479b2052__nav-channel__tab-icon" style="display: none;">
                                                                        <img src="${pageContext.request.contextPath}/images/32x32.png" class="quark-5cb43f1780772100479b2052__nav-channel__tab-icon-default" lazyload="on">
                                                                        <img src="${pageContext.request.contextPath}/wqlimages/32x32%20(1).png" class="quark-5cb43f1780772100479b2052__nav-channel__tab-icon-hover" lazyload="on">
                                                                    </i>
                                                                    <h3>机身内存</h3>
                                                                </a>
                                                                <!--下面的选项-->
                                                                <nav class="quark-5cb43f1780772100479b2052__nav-channel__sub-tabs" style="height: 4em;">
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">1TB</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">512GB</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">256GB</span>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">128GB</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">64GB</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">更多</span>
                                                                    </a>
                                                                </nav>
                                                            </li>

                                                            <!--运行内存-->
                                                            <li class="quark-5cb43f1780772100479b2052__nav-channel__tab-item quark-5cb43f1780772100479b2052__nav-channel__tab-item--gutter" style="border-style: dotted; border-color: rgb(228, 229, 234) transparent transparent;">
                                                                <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__tab-name" style="color: rgb(14, 1, 1);">
                                                                    <i class="quark-5cb43f1780772100479b2052__nav-channel__tab-icon" style="display: none;">
                                                                        <img src="${pageContext.request.contextPath}/images/32x32.png" class="quark-5cb43f1780772100479b2052__nav-channel__tab-icon-default" lazyload="on">
                                                                        <img src="${pageContext.request.contextPath}/wqlimages/32x32%20(1).png" class="quark-5cb43f1780772100479b2052__nav-channel__tab-icon-hover" lazyload="on">
                                                                    </i>
                                                                    <h3>运行内存</h3>
                                                                </a>
                                                                <!--下面的选项-->
                                                                <nav class="quark-5cb43f1780772100479b2052__nav-channel__sub-tabs" style="height: 4em;">
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">16GB</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">12GB</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">8GB</span>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">6GB</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">4GB</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">更多</span>
                                                                    </a>
                                                                </nav>
                                                            </li>

                                                            <!--屏幕尺寸-->
                                                            <li class="quark-5cb43f1780772100479b2052__nav-channel__tab-item quark-5cb43f1780772100479b2052__nav-channel__tab-item--gutter" style="border-style: dotted; border-color: rgb(228, 229, 234) transparent transparent;">
                                                                <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__tab-name" style="color: rgb(14, 1, 1);">
                                                                    <i class="quark-5cb43f1780772100479b2052__nav-channel__tab-icon" style="display: none;">
                                                                        <img src="${pageContext.request.contextPath}/images/32x32.png" class="quark-5cb43f1780772100479b2052__nav-channel__tab-icon-default" lazyload="on">
                                                                        <img src="${pageContext.request.contextPath}/wqlimages/32x32%20(1).png" class="quark-5cb43f1780772100479b2052__nav-channel__tab-icon-hover" lazyload="on">
                                                                    </i>
                                                                    <h3>屏幕尺寸（英寸）</h3>
                                                                </a>
                                                                <!--下面的选项-->
                                                                <nav class="quark-5cb43f1780772100479b2052__nav-channel__sub-tabs" style="height: 4em;">
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">>=6.95</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">>=6.85</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">>=6.75</span>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">>=6.65</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">>=6.45</span>
                                                                        <i class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-dash"></i>
                                                                    </a>
                                                                    <a href="" class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-link" target="_blank">
                                                                        <span class="quark-5cb43f1780772100479b2052__nav-channel__sub-tab-name">更多</span>
                                                                    </a>
                                                                </nav>
                                                            </li>

                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--更多选择-->
                                <div class="lc-col  lc-col--cols-full gengduodaxiao">
                                    <div>
                                        <div class="lc-imgarea-base lc-imgarea-base--lg" style="width: auto; height: auto;">
                                            <div class="lc-imgarea-base__links">
                                                <div class="lianjie">
                                                    <a href="${pageContext.request.contextPath}/product/seckillhome.jsp">
                                                        <h3 style="background-color: #e83632; color: #fff;font-size: 25px; font-weight: 700;">秒杀专场</h3>
                                                    </a>

                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--右边部分-->
                        <div class="lc-col  lc-col--cols6-5">
                            <div class="lc-row  lc-row--md" style="margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;">
                                <div class="lc-col  lc-col--cols-full">
                                    <div>
                                        <div class="quark-5cd3e63d9a6ea5003becd174__nav-menu quark-5cd3e63d9a6ea5003becd174__nav-menu--lg">
                                            <div class="quark-5cd3e63d9a6ea5003becd174__nav-menu__list">
                                                        <span href="" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__item" target="_blank" style="padding-left: 50px; padding-right: 50px; height: 40px; line-height: 40px;">
                                                            <i class="quark-5cd3e63d9a6ea5003becd174__nav-menu__icon quark-5cd3e63d9a6ea5003becd174__nav-menu__icon--active quark-5cd3e63d9a6ea5003becd174__nav-menu__icon--hide" style="width: 20px; height: 20px;">
                                                                <img src="${pageContext.request.contextPath}/images/40.png" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__img-active">
                                                                <img src="${pageContext.request.contextPath}/wqlimages/40%20(1).png" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__img-default">
                                                            </i>
                                                            <p class="quark-5cd3e63d9a6ea5003becd174__nav-menu__name" style="color: rgb(40, 120, 230);">有新机</p>
                                                            <span class="quark-5cd3e63d9a6ea5003becd174__nav-menu__dash" style="border-right-width: 1px;"></span>
                                                        </span>

                                                <!--                                                        <a href="" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__item" target="_blank" style="padding-left: 50px; padding-right: 50px; height: 40px; line-height: 40px;">-->
                                                <span href="" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__item" target="_blank" style="padding-left: 50px; padding-right: 50px; height: 40px; line-height: 40px;">
                                                            <i class="quark-5cd3e63d9a6ea5003becd174__nav-menu__icon quark-5cd3e63d9a6ea5003becd174__nav-menu__icon--active quark-5cd3e63d9a6ea5003becd174__nav-menu__icon--hide" style="width: 20px; height: 20px;">
                                                                <img src="${pageContext.request.contextPath}/images/40.png" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__img-active">
                                                                <img src="${pageContext.request.contextPath}/wqlimages/40%20(1).png" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__img-default">
                                                            </i>
                                                            <p class="quark-5cd3e63d9a6ea5003becd174__nav-menu__name" style="color: rgb(0, 0, 0);">有新机</p>
                                                            <span class="quark-5cd3e63d9a6ea5003becd174__nav-menu__dash" style="border-right-width: 1px;"></span>
                                                        </span>

                                                <span href="" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__item" target="_blank" style="padding-left: 50px; padding-right: 50px; height: 40px; line-height: 40px;">
                                                            <i class="quark-5cd3e63d9a6ea5003becd174__nav-menu__icon quark-5cd3e63d9a6ea5003becd174__nav-menu__icon--active quark-5cd3e63d9a6ea5003becd174__nav-menu__icon--hide" style="width: 20px; height: 20px;">
                                                                <img src="${pageContext.request.contextPath}/images/40.png" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__img-active">
                                                                <img src="${pageContext.request.contextPath}/wqlimages/40%20(1).png" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__img-default">
                                                            </i>
                                                            <p class="quark-5cd3e63d9a6ea5003becd174__nav-menu__name" style="color: rgb(0, 0, 0);">有新机</p>
                                                            <span class="quark-5cd3e63d9a6ea5003becd174__nav-menu__dash" style="border-right-width: 1px;"></span>
                                                        </span>

                                                <span href="" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__item" target="_blank" style="padding-left: 50px; padding-right: 50px; height: 40px; line-height: 40px;">
                                                            <i class="quark-5cd3e63d9a6ea5003becd174__nav-menu__icon quark-5cd3e63d9a6ea5003becd174__nav-menu__icon--active quark-5cd3e63d9a6ea5003becd174__nav-menu__icon--hide" style="width: 20px; height: 20px;">
                                                                <img src="${pageContext.request.contextPath}/images/40.png" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__img-active">
                                                                <img src="${pageContext.request.contextPath}/wqlimages/40%20(1).png" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__img-default">
                                                            </i>
                                                            <p class="quark-5cd3e63d9a6ea5003becd174__nav-menu__name" style="color: rgb(0, 0, 0);">有新机</p>
                                                            <span class="quark-5cd3e63d9a6ea5003becd174__nav-menu__dash" style="border-right-width: 1px;"></span>
                                                        </span>

                                                <span href="" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__item" target="_blank" style="padding-left: 50px; padding-right: 50px; height: 40px; line-height: 40px;">
                                                            <i class="quark-5cd3e63d9a6ea5003becd174__nav-menu__icon quark-5cd3e63d9a6ea5003becd174__nav-menu__icon--active quark-5cd3e63d9a6ea5003becd174__nav-menu__icon--hide" style="width: 20px; height: 20px;">
                                                                <img src="${pageContext.request.contextPath}/images/40.png" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__img-active">
                                                                <img src="${pageContext.request.contextPath}/wqlimages/40%20(1).png" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__img-default">
                                                            </i>
                                                            <p class="quark-5cd3e63d9a6ea5003becd174__nav-menu__name" style="color: rgb(0, 0, 0);">有新机</p>
                                                            <span class="quark-5cd3e63d9a6ea5003becd174__nav-menu__dash" style="border-right-width: 1px;"></span>
                                                        </span>

                                                <span href="" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__item" target="_blank" style="padding-left: 50px; padding-right: 50px; height: 40px; line-height: 40px;">
                                                            <i class="quark-5cd3e63d9a6ea5003becd174__nav-menu__icon quark-5cd3e63d9a6ea5003becd174__nav-menu__icon--active quark-5cd3e63d9a6ea5003becd174__nav-menu__icon--hide" style="width: 20px; height: 20px;">
                                                                <img src="${pageContext.request.contextPath}/images/40.png" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__img-active">
                                                                <img src="${pageContext.request.contextPath}/wqlimages/40%20(1).png" class="quark-5cd3e63d9a6ea5003becd174__nav-menu__img-default">
                                                            </i>
                                                            <p class="quark-5cd3e63d9a6ea5003becd174__nav-menu__name" style="color: rgb(0, 0, 0);">有新机</p>
                                                        </span>

                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!--轮播图-->
                                <div class="lc-col  lc-col--cols-full">
                                    <div>
                                        <div class="lc-ad-swiper">
                                            <div class="lc-ad-swiper__inner lc-ad-swiper__inner--lg">
                                                <div class="lc-ad-swiper__container lc-ad-swiper__container--cols6-5">
                                                    <div class="lc-ad-swiper__main" style="height: 466px; width: 990px;">

                                                        <div class="layui-carousel" id="test10">
                                                            <div carousel-item="" style="height: 466px; width: 990px; ">
                                                                <div><img src="${pageContext.request.contextPath}/images/lunbo01.webp" class="lc-ad-swiper__covers-item-img" alt=""></div>
                                                                <div><img src="${pageContext.request.contextPath}/images/lunbo02.webp" class="lc-ad-swiper__covers-item-img" alt=""></div>
                                                                <div><img src="${pageContext.request.contextPath}/images/lunbo03.webp" class="lc-ad-swiper__covers-item-img" alt=""></div>
                                                                <div><img src="${pageContext.request.contextPath}/images/lunbo04.webp" class="lc-ad-swiper__covers-item-img" alt=""></div>
                                                                <div><img src="${pageContext.request.contextPath}/images/lunbo05.webp" class="lc-ad-swiper__covers-item-img" alt=""></div>
                                                                <div><img src="${pageContext.request.contextPath}/images/lunbo06.webp" class="lc-ad-swiper__covers-item-img" alt=""></div>
                                                                <div><img src="${pageContext.request.contextPath}/images/lunbo07.webp" class="lc-ad-swiper__covers-item-img" alt=""></div>
                                                            </div>
                                                        </div>


                                                        <script src="${pageContext.request.contextPath}/res/layui/layui.js" charset="utf-8"></script>
                                                        <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
                                                        <script>
                                                            layui.use(['carousel', 'form'], function(){
                                                                var carousel = layui.carousel
                                                                    ,form = layui.form;

                                                                //常规轮播
                                                                carousel.render({
                                                                    elem: '#test1'
                                                                    ,arrow: 'always'
                                                                });

                                                                //改变下时间间隔、动画类型、高度
                                                                carousel.render({
                                                                    elem: '#test2'
                                                                    ,interval: 1800
                                                                    ,anim: 'fade'
                                                                    ,height: '120px'
                                                                });

                                                                //设定各种参数
                                                                var ins3 = carousel.render({
                                                                    elem: '#test3'
                                                                });
                                                                //图片轮播
                                                                carousel.render({
                                                                    elem: '#test10'
                                                                    ,width: '990px'
                                                                    ,height: '466px'
                                                                    ,interval: 5000
                                                                });

                                                                //事件
                                                                carousel.on('change(test4)', function(res){
                                                                    console.log(res)
                                                                });

                                                                var $ = layui.$, active = {
                                                                    set: function(othis){
                                                                        var THIS = 'layui-bg-normal'
                                                                            ,key = othis.data('key')
                                                                            ,options = {};

                                                                        othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                                                                        options[key] = othis.data('value');
                                                                        ins3.reload(options);
                                                                    }
                                                                };

                                                                //监听开关
                                                                form.on('switch(autoplay)', function(){
                                                                    ins3.reload({
                                                                        autoplay: this.checked
                                                                    });
                                                                });

                                                                $('.demoSet').on('keyup', function(){
                                                                    var value = this.value
                                                                        ,options = {};
                                                                    if(!/^\d+$/.test(value)) return;

                                                                    options[this.name] = value;
                                                                    ins3.reload(options);
                                                                });

                                                                //其它示例
                                                                $('.demoTest .layui-btn').on('click', function(){
                                                                    var othis = $(this), type = othis.data('type');
                                                                    active[type] ? active[type].call(this, othis) : '';
                                                                });
                                                            });
                                                        </script>





                                                        <!--<div class="layui-carousel" id="test1">
                                                            <div carousel-item style="height: 466px; width: 990px; ">
                                                                <div><img src="wqlimages/lunbo01.webp" class="lc-ad-swiper__covers-item-img" alt=""></div>
                                                                <div><img src="wqlimages/lunbo02.webp" class="lc-ad-swiper__covers-item-img" alt=""></div>
                                                                <div><img src="wqlimages/lunbo03.webp" class="lc-ad-swiper__covers-item-img" alt=""></div>
                                                                <div><img src="wqlimages/lunbo04.webp" class="lc-ad-swiper__covers-item-img" alt=""></div>
                                                                <div><img src="wqlimages/lunbo05.webp" class="lc-ad-swiper__covers-item-img" alt=""></div>
                                                                <div><img src="wqlimages/lunbo06.webp" class="lc-ad-swiper__covers-item-img" alt=""></div>
                                                                <div><img src="wqlimages/lunbo07.webp" class="lc-ad-swiper__covers-item-img" alt=""></div>
                                                            </div>
                                                        </div>
                                                        &lt;!&ndash; 条目中可以是任意内容，如：<img src=""> &ndash;&gt;

                                                        <script src="res/layui/layui.js"></script>
                                                        <script>
                                                            layui.use('carousel', function(){
                                                                var carousel = layui.carousel;
                                                                //建造实例
                                                                carousel.render({
                                                                    elem: '#test1'
                                                                    ,width: '100%' //设置容器宽度
                                                                    ,arrow: 'always' //始终显示箭头
                                                                    //,anim: 'updown' //切换动画方式
                                                                });
                                                            });
                                                        </script>-->


                                                        <!--<div class="lc-ad-swiper__prev"></div>
                                                        <div class="lc-ad-swiper__next"></div>
                                                        <ul class="lc-ad-swiper__covers">
                                                            <li class="lc-ad-swiper__covers-item lc-ad-swiper__covers-item&#45;&#45;hide" style="animation-duration: 500ms;">
                                                                <img src="wqlimages/lunbo01.webp" class="lc-ad-swiper__covers-item-img">
                                                            </li>

                                                            <li class="lc-ad-swiper__covers-item lc-ad-swiper__covers-item&#45;&#45;slid-from-right" style="animation-duration: 500ms;">
                                                                <img src="wqlimages/lunbo02.webp" class="lc-ad-swiper__covers-item-img">
                                                            </li>
                                                        </ul>-->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>



        </div>
    </div>

    <!--商品上面过渡部分部分-->
    <div class="lc-floor lc-xfloor--id-1597905512302  lc-floor--lg" style="background-color: rgb(248, 248, 248); background-size: auto;">
        <div class="lc-floor__inner">
            <div class="lc-row  lc-row--lg" style="margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;">
                <div class="lc-col  lc-col--cols-full">
                    <div>
                        <div class="lc-title-floor lc-title-floor--text" style="background-color: rgb(248, 248, 248);">
                            <div class="txt lc-title-floor__txt lc-title-floor__txt--center lc-title-floor__txt--subtitle">
                                <div class="lc-title-floor__title">
                                    <span class="title__info" style="color: rgb(51, 51, 51);">品牌旗舰商品</span>
                                </div>
                                <div class="main__subtitle" style="color: rgb(52, 54, 57);">大牌聚惠，品质甄选</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--下面的商品部分-->
    <!--商品信息-->
    <div class="lc-floor lc-xfloor--id-1597905526839  lc-floor--lg" style="background-color: rgb(248, 248, 248); background-size: auto;">
        <div class="lc-floor__inner lc-floor__inner-zidingyi">
            <div class="lc-row  lc-row--lg" style="margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;">

                <!--左边图片
                <div class="lc-col  lc-col&#45;&#45;cols6-1">
                    <div>
                        <div class="lc-ad-base">
                            <div class="lc-ad-base__list lc-ad-base__list&#45;&#45;lg">
                                <div class="lc-ad-base__item lc-ad-base__item&#45;&#45;cols6-1">
                                    <img src="wqlimages/shoujishangpintu01.webp">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>-->

                <!--右边商品-->
                <div class="lc-col  lc-col--cols6-5 shangpinhezi">
                    <div>
                        <div class="lc-goods-base">
                            <div class="lc-goods-base-main lc-goods-base-main--lg pinpanqijianshangpin">

                                <!--行中的第一个商品-->
                                <%--<a href="${pageContext.request.contextPath}/product/11">
                                    <div class="goods-item-wrapper goods-item-wrapper--vertical goods-item-wrapper--cols6-1">
                                        <div class="goods-item goods-item--nomargin" style="padding: 15px;">
                                            <div class="goods-item__cover" style="height: 160px;">
                                                <img class="goods-item__img" src="${pageContext.request.contextPath}/images/shoujishangpin01.webp" style="width: 160px; height: 160px;">
                                            </div>
                                            <div class="goods-item__info">
                                                <div class="goods-item__title goods-item__title--twoline" style="color: rgb(0, 0, 0);">Apple Watch SE 智能手表 GPS款 44毫米深空灰色铝金属表壳 黑色运动型表带MYDT2CH/A</div>
                                                <div class="goods-item__content">
                                                    <div class="goods-item__price" style="color: rgb(240, 43, 43);">
                                                        ￥
                                                        2399.00
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>--%>



                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <!--猜你喜欢-->
    <div class="lc-floor lc-xfloor--id-1597910756868  lc-floor--lg" style="background-size: auto;">
        <div class="lc-floor__inner lc-floor__inner-zidingyi">

            <!--标题-->
            <div class="lc-row  lc-row--lg" style="margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;">
                <div class="lc-col  lc-col--cols-full">
                    <div>
                        <div class="lc-title-floor lc-title-floor--text" style="background-color: rgb(255, 255, 255);">
                            <div class="txt lc-title-floor__txt lc-title-floor__txt--center lc-title-floor__txt--subtitle">
                                <div class="lc-title-floor__title">
                                    <span class="title__info" style="color: rgb(51, 51, 51);">猜你喜欢</span>
                                </div>
                                <div class="main__subtitle" style="color: rgb(52, 54, 57);">大牌聚惠，品质甄选</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--猜你喜欢商品-->
            <div class="lc-row  lc-row--lg" style="margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;">
                <div class="lc-col  lc-col--cols-full">
                    <div>
                        <div class="lc-goods-base">
                            <div class="lc-goods-base-main lc-goods-base-main--lg cainixihuanshangpin">

                                <!--第一个商品-->
                                <%--<a href="${pageContext.request.contextPath}/product/21">
                                    <div class="goods-item-wrapper goods-item-wrapper--vertical goods-item-wrapper--cols6-1">
                                        <div class="goods-item" style="padding: 15px;">
                                            <div class="goods-item__cover" style="height: 160px;">
                                                <img class="goods-item__img" src="${pageContext.request.contextPath}/images/tuijianshanpin01.webp" style="width: 160px; height: 160px;">
                                            </div>
                                            <div class="goods-item__info">
                                                <div class="goods-item__title goods-item__title--twoline" style="color: rgb(0, 0, 0);">华为mate40e 5G/4G手机 【支持鸿蒙HarmonyOs】 亮黑色 全网通4G版【8GB+256GB】</div>
                                                <div class="goods-item__content">
                                                    <div class="goods-item__price" style="color: rgb(240, 43, 43);">
                                                        ￥
                                                        5099.00
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>--%>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!--下方提示信息-->
    <div id="cmsfooter">
        <div id="service-2017">

            <!-- 多快好省 -->
            <div class="w hhzidingyi">
                <ol class="slogen">
                    <li class="item fore1">
                        <i>多</i>
                        品类齐全，轻松购物
                    </li>
                    <li class="item fore2">
                        <i>多</i>
                        多仓发货，极速配送
                    </li>
                    <li class="item fore3">
                        <i>好</i>
                        正品行货，精致服务
                    </li>
                    <li class="item fore4">
                        <i>省</i>
                        天天低价，畅选无忧
                    </li>
                </ol>
            </div>

            <!--下面的信息-->
            <div class="shulan-help">
                <div class="w hhzidingyi">
                    <div class="tishixinxi">
                        <span class="zititishixinxi">欢迎使用树懒商城，为您提供高质量的服务，是我们商城最高的追求！</span>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>


<script>


    // 项目刚开启的时候要想后端的 controller 层进行请求，访问数据
    loadProduct();


    // 加载首页需要的商品数据，产生 ajax 请求
    function loadProduct(){
        var url = "${pageContext.request.contextPath}/product/generalMerchandise";

        $.get(url
            ,null
            ,function (result){
                // 主要的就是页面的渲染
                /*for (var i=0;i<result.length;i++){
                    console.log(result[i]);
                }*/
                // console.log(JSON.stringify(result));

                var proWriterArr = result[0].data.list;  // 存放的查找到的数据集合

                for (var i=0;i<proWriterArr.length;i++){
                    var proDesc = proWriterArr[i].proDesc;
                    var proPrice = proWriterArr[i].proPrice;
                    var proImg = proWriterArr[i].proImg;
                    var proId = proWriterArr[i].proId;  // 获得商品的id，通过点击商品的盒子，跳转到商品对应的商品详情页面


                    // 将得到的数据渲染到页面中
                    var LiEle =
                        '<a href="${pageContext.request.contextPath}/product/'+ proId +'" target="_blank">\n' +
                        '                                    <div class="goods-item-wrapper goods-item-wrapper--vertical goods-item-wrapper--cols6-1">\n' +
                        '                                        <div class="goods-item goods-item--nomargin" style="padding: 15px;">\n' +
                        '                                            <div class="goods-item__cover" style="height: 160px;">\n' +
                        '                                                <img class="goods-item__img" src="'+ proImg +'" style="width: 160px; height: 160px;">\n' +
                        '                                            </div>\n' +
                        '                                            <div class="goods-item__info">\n' +
                        '                                                <div class="goods-item__title goods-item__title--twoline" style="color: rgb(0, 0, 0);">'+ proDesc +'</div>\n' +
                        '                                                <div class="goods-item__content">\n' +
                        '                                                    <div class="goods-item__price" style="color: rgb(240, 43, 43);">\n' +
                        '                                                        ￥\n' +
                        '                                                        '+ proPrice +'\n' +
                        '                                                    </div>\n' +
                        '                                                </div>\n' +
                        '                                            </div>\n' +
                        '                                        </div>\n' +
                        '                                    </div>\n' +
                        '                                </a>';

                    $(".pinpanqijianshangpin").append(LiEle);

                    /*var LiEle =
                        '<div class="goods-item-wrapper goods-item-wrapper--vertical goods-item-wrapper--cols6-1">\n' +
                        '   <div class="goods-item goods-item--nomargin" style="padding: 15px;">\n' +
                        '       <div class="goods-item__cover" style="height: 160px;">\n' +
                        '           <img class="goods-item__img" src="'+ proImg +'" style="width: 160px; height: 160px;">\n' +
                        '       </div>\n' +
                        '       <div class="goods-item__info">\n' +
                        '           <div class="goods-item__title goods-item__title--twoline" style="color: rgb(0, 0, 0);">'+ proDesc +'</div>\n' +
                        '           <div class="goods-item__content">\n' +
                        '               <div class="goods-item__price" style="color: rgb(240, 43, 43);">\n' +
                        '                   ￥\n' +
                        '                   '+ proPrice +'\n' +
                        '               </div>\n' +
                        '           </div>\n' +
                        '       </div>\n' +
                        '   </div>\n' +
                        '</div>';
                    $(".pinpanqijianshangpin").append(LiEle);*/
                }

                var proWriterRecommendation = result[1].data.list;

                // console.log(proWriterRecommendation);

                for (var j=0;j<proWriterRecommendation.length;j++){

                    var proDesc = proWriterRecommendation[j].proDesc;
                    var proPrice = proWriterRecommendation[j].proPrice;
                    var proImg = proWriterRecommendation[j].proImg;
                    var proId = proWriterRecommendation[j].proId;

                    var DivEle =
                        '<a href="${pageContext.request.contextPath}/product/'+ proId +'">\n' +
                        '                                    <div class="goods-item-wrapper goods-item-wrapper--vertical goods-item-wrapper--cols6-1">\n' +
                        '                                        <div class="goods-item" style="padding: 15px;">\n' +
                        '                                            <div class="goods-item__cover" style="height: 160px;">\n' +
                        '                                                <img class="goods-item__img" src="'+ proImg +'" style="width: 160px; height: 160px;">\n' +
                        '                                            </div>\n' +
                        '                                            <div class="goods-item__info">\n' +
                        '                                                <div class="goods-item__title goods-item__title--twoline" style="color: rgb(0, 0, 0);">'+ proDesc +'</div>\n' +
                        '                                                <div class="goods-item__content">\n' +
                        '                                                    <div class="goods-item__price" style="color: rgb(240, 43, 43);">\n' +
                        '                                                        ￥\n' +
                        '                                                        '+ proPrice +'\n' +
                        '                                                    </div>\n' +
                        '                                                </div>\n' +
                        '                                            </div>\n' +
                        '                                        </div>\n' +
                        '                                    </div>\n' +
                        '                                </a>';

                    $(".cainixihuanshangpin").append(DivEle);

                }

        },"json")
    }


</script>

</body>

</html>
